<template>
  <div class="title">
    <span class="city">{{ city.name }}</span>
    <el-input
      @input="handleInput"
      v-model="searchCity"
      placeholder="请输入要搜索的城市名"
    />
    <el-select v-model="vecValue" placeholder="请选择要绘制的图形" size="large">
      <el-option
        v-for="(item, index) in vecOptions"
        :key="index"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select
      v-model="markValue"
      :disabled="zoomLevel < isSelet"
      @click="handleMarkClick"
      placeholder="请选择要标记的类型"
      size="large"
    >
      <el-option
        v-for="(item, index) in markOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { debounce } from 'lodash-es'
import { useOlStore } from '@/stores/openlayer.js'
const store = useOlStore()

//从pinia导入需要的方法和变量
const { getIpCity, getSearch } = store
const { city, zoomLevel, vecValue, vecOptions, markValue, markOptions } =
  storeToRefs(store)

//搜索框的变量
const searchCity = ref('')
//可操作的变量
const isSelet = 13
//挂载的时候请求ip城市
onMounted(async () => {
  const res = await getIpCity()
  city.value = { name: `${res.city}`, adcode: `${res.adcode}` }
})

//输入框的监听函数
const handleInput = debounce(async () => {
  // 输入的值为空则结束
  if (!searchCity.value.trim()) return
  //

  const res = await getSearch(searchCity.value.trim())
  if (res.status === '1') {
    // console.log(res)
    // 搜索到结果给city赋值
    city.value = {
      name: `${res.geocodes[0].city}`,
      adcode: `${res.geocodes[0].adcode}`,
    }
    console.log(city.value)
  } else {
    alert('没有找到该城市')
  }
}, 500)

//mark的点击事件
const handleMarkClick = () => {
  if (zoomLevel.value < isSelet) {
    ElMessage.error('请放大到13级以上')
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  //   justify-content: center;
  align-items: center;
  gap: 50px;
  height: 100%;
  padding-left: 20px;
  .city {
    font-size: 24px;
    color: #fff;
    margin-right: 100px;
  }
  .el-input,
  .el-select {
    height: 70%;
    width: 240px;
  }
}
</style>
